<template>
  <el-card>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="changFlag">增加</el-button>
      <el-divider></el-divider>
      <SpecsTable @updateSpecs = "updateSpecs" :specsList = "specsList" :spaceTotal = "spaceTotal" :size="size"></SpecsTable>  
      <SpecsMudel @updateSpecs = "updateSpecs" :showFlag="showFlag"></SpecsMudel>  
  </el-card>    
</template>

<script>
import SpecsTable from './SpecsTable'
import SpecsMudel from './SpecsMudel'
import { mapActions, mapState } from 'vuex'

export default {
    computed:{
        ...mapState({specsList: state=>state.specs.specsList,spaceTotal: state=>state.specs.total,})

    },
    data(){
        return {
            page:1,
            size:1,
            showFlag: {
                status: false
            }
        }
    },
    components: {
        SpecsTable,
        SpecsMudel
    },
    methods: {
        ...mapActions("specs",['specsListActions','specsTotalActions']),
        changFlag(){
            this.showFlag.status = true
        },
        updateSpecs(){
            this.specsListActions(this.page,this.size) //分页页面数据  page  size
            // 页码总数
            this.specsTotalActions() // 页码总数
        }
    },
    created(){
        this.specsListActions(this.page,this.size) //分页页面数据  page  size
        // 页码总数
        this.specsTotalActions() // 页码总数
    } 
}
</script>

<style>

</style>